<template>
  <el-container>
    <el-main>
      <HtmlIndex/>
    </el-main>
    <el-footer height="60px">
      <!-- 底部菜单内容 -->
      <el-row type="flex" justify="center">
        <el-col :span="6" class="footer-menu-item">
          <el-button type="text">菜单1</el-button>
        </el-col>
        <el-col :span="6" class="footer-menu-item">
          <el-button type="text">菜单2</el-button>
        </el-col>
        <el-col :span="6" class="footer-menu-item">
          <el-button type="text">菜单3</el-button>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>
<script>
import HtmlIndex from './index/index.vue'

export default {
  components: {
    HtmlIndex,  // 注册组件
  },
  name: 'HtmlContainer'

}

</script>


<style scoped>
.el-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 让 el-main 占据剩余空间 */
.el-main {
  flex-grow: 1; /* 这将使 el-main 占据除了 el-footer 之外的所有空间 */
  /* 如果需要，可以添加 padding-bottom 来防止内容被固定的 el-footer 遮挡 */
  /* padding-bottom: 60px; */ /* 与 el-footer 的高度相匹配 */
}

/* 固定 el-footer 在视口底部 */
.el-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 根据需要设置高度 */
  background-color: #fff; /* 设置背景色，以便与页面其他部分区分开 */
  /* 添加其他样式，如边框、阴影等 */
  border-top: 1px solid #ebeef5;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 确保在其他内容之上 */
}
</style>
